<template>
    <div class="role-manage-container">
        <h2 class="page-title">管理角色</h2>

        <div class="toolbar">
            <span class="label">角色名称:</span>
            <el-input v-model="query.roleName" class="query-input" placeholder="请输入角色名称" clearable />
            <el-button type="primary" class="btn" @click="fetchRoles">查询</el-button>
            <el-button class="btn" @click="goAdd">添加</el-button>
        </div>

        <el-table :data="tableData" border style="width: 100%" class="role-table">
            <el-table-column prop="roleId" label="角色编号" width="90" align="center" />
            <el-table-column prop="roleName" label="角色名称" align="center" />
            <el-table-column prop="pessionName" label="权限" align="left">
                <template #default="scope">

                </template>
            </el-table-column>
            <el-table-column prop="state" label="是否启用" align="center" width="160">
                <template #default="scope">
                    {{ scope.row.state ? '启用' : '禁用' }}
                </template>
            </el-table-column>
            <el-table-column type="index" label="序号" width="70" align="center" />
            <el-table-column prop="creaTime" label="创建时间" width="180" align="center">
                <template v-slot="scope">
                    {{ moment(scope.row.creaTime).format("YYYY-MM-DD HH:mm:ss") }}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="170" align="center">
                <template #default="scope">
                    <el-button type="primary" @click="handleEdit(scope.row.roleId)">编辑</el-button>
                    <el-button type="danger" @click="Del(scope.row.roleId)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="pager-links">
            <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
                :page-sizes="[1, 3, 6]" :background="true" layout="total, sizes, prev, pager, next, jumper,slot"
                prev-text="上一页" next-text="下一页" :total="page.totalCount" />
        </div>
    </div>

</template>

<script lang="ts" setup>
import { reactive, ref, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { postinfo, xieInfo } from '@/Http/axiosInfo'
import moment from 'moment'


const router = useRouter()

const query = reactive({
    roleName: '',
})

const page = reactive({
    pageIndex: 1,
    pageSize: 3,
    totalCount: 0,
    pageCount: 0,
})

const tableData = ref([])

const fetchRoles = () => {
    // 若后端接口不同，请在此调整
    postinfo.get('/MangRole/GetRoleList', {
        params: {
            roleName: query.roleName,
            pageIndex: page.pageIndex,
            pageSize: page.pageSize,
        }
    })
        .then((res: any) => {
            tableData.value = res.data.data.pageData
            page.pageCount = res.data.data.pageCount
            page.totalCount = res.data.data.totalCount
        })
}

//删除角色
const Del = (RoleId: any) => {
    ElMessageBox.confirm(
        '确认删除吗?',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            xieInfo.delete('/MngRole/DelRole?RoleId=' + RoleId)
                .then(res => {
                    if (res.data.code == 500) {
                        ElMessage.success('删除成功');
                        fetchRoles()
                    }
                    else {
                        ElMessage.error(res.data.msg);
                    }
                })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}

// 跳转到编辑页面
const handleEdit = (RoleId: any) => {
    router.push({
        name: 'UpdateRole',
        query: {
            RoleId: RoleId
        }
    })
}

const goAdd = () => {
    router.push({ path: '/AddRole' })
}


watch(page, () => {
    fetchRoles()
})


onMounted(() => {
    fetchRoles()
})
</script>

<style scoped>
.role-manage-container {
    padding: 24px 28px 40px;
}

.page-title {
    font-size: 32px;
    font-weight: 800;
    margin: 0 0 24px 0;
}

.toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.label {
    font-size: 16px;
}

.query-input {
    width: 260px;
}

.btn {
    min-width: 88px;
}

.role-table :deep(.el-table__cell) {
    font-size: 14px;
}

.op-link {
    color: #1677ff;
    margin: 0 8px;
}

.op-link:hover {
    text-decoration: underline;
}

.pager-links {
    display: flex;
    gap: 18px;
    margin-top: 18px;
}

.pager-links a {
    color: #1677ff;
}

.pager-links a:hover {
    text-decoration: underline;
}
</style>
